<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aladdin</title>
    <script src="https://cdn.staticfile.org/vue/2.6.7/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.5.4/index.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.5.4/theme-chalk/index.css"/>
    <link rel="icon" href="favicon.ico"/>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
            /*height: 10vh;*/
        }

        html body { margin:0; height:100%; }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100vh">
        <el-header><h2 style="margin-top: 0px;margin-bottom: 0px;">Aladdin</h2></el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu >
                    <el-menu-item index="./home.html" @click="change_fram_url">
                        <i class="el-icon-menu"></i>
                        <span slot="title">介绍</span>
                    </el-menu-item>
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-search"></i>爬虫</template>
                        <el-menu-item-group>
                            <el-menu-item index="crawler-config.html" @click="change_fram_url">配置</el-menu-item>
                            <el-menu-item index="crawler-task.html" @click="change_fram_url">任务</el-menu-item>
                            <el-submenu index="1-4">
                                <template slot="title">数据源配置</template>
                                <el-menu-item index="weibo-user-info.html" @click="change_fram_url">微博用户信息</el-menu-item>
                            </el-submenu>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-sort"></i>机器学习</template>
                        <el-menu-item-group>
                            <el-menu-item index="label-data.html" @click="change_fram_url">数据标注</el-menu-item>
                            <el-menu-item index="data-visualization.html" @click="change_fram_url">可视化</el-menu-item>
                            <el-menu-item index="2-2" @click="change_fram_url">模型训练</el-menu-item>
                            <el-menu-item index="2-3" @click="change_fram_url">数据预测</el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>
                    <el-menu-item index="3" @click="change_fram_url">
                        <i class="el-icon-info"></i>
                        <span slot="title">系统状态</span>
                    </el-menu-item>

                    <el-menu-item index="./test.html" @click="change_fram_url">
                        <i class="el-icon-menu"></i>
                        <span slot="title">测试路由</span>
                    </el-menu-item>

                    <el-menu-item index="./test.html" @click="change_fram_url">
                        <i class="el-icon-document"></i>
                        <span slot="title">开放数据集</span>
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <el-main>
                <iframe id="content" name="content"
                        width="100%" height="100%" frameborder="0"
                        src="home.html" marginwidth="0" marginheight="0"
                        vspace="0" hspace="0" allowtransparency="true"
                        scrolling="auto" allowfullscreen="true"></iframe>
            </el-main>
        </el-container>
    </el-container>


</div>
<script>

    var v = new Vue({
        el: '#app',
        data: {
        },
        methods:{

            change_fram_url(e){
                document.getElementById("content").setAttribute("src",e.$options.propsData.index);
            }
        }

    });

</script>
</body>
</html>